<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的文章 - 个人博客</title>
    <link rel="stylesheet" href="assets/css/font-awesome.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        /* 顶部导航 */
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-title {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .header-actions {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-outline {
            background: transparent;
            color: white;
            border: 2px solid rgba(255,255,255,0.3);
        }

        .btn-outline:hover {
            background: rgba(255,255,255,0.1);
            border-color: white;
        }

        .btn-primary {
            background: #28a745;
            color: white;
        }

        .btn-primary:hover {
            background: #218838;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #5a6268;
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background: #c82333;
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
        }

        /* 主要内容 */
        .main-content {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            text-align: center;
        }

        .stat-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            color: #667eea;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 0.25rem;
        }

        .stat-label {
            color: #6c757d;
            font-size: 0.9rem;
        }

        /* 工具栏 */
        .toolbar {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .toolbar-left {
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .search-box {
            display: flex;
            align-items: center;
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 0.5rem;
            transition: border-color 0.3s ease;
        }

        .search-box:focus-within {
            border-color: #667eea;
        }

        .search-box input {
            border: none;
            background: none;
            outline: none;
            padding: 0.25rem;
            min-width: 200px;
        }

        .search-box button {
            background: none;
            border: none;
            color: #6c757d;
            cursor: pointer;
            padding: 0.25rem;
        }

        .status-filter {
            display: flex;
            gap: 0.5rem;
        }

        .filter-btn {
            padding: 0.5rem 1rem;
            border: 2px solid #e9ecef;
            background: white;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.3s ease;
        }

        .filter-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .filter-btn:hover {
            border-color: #667eea;
        }

        /* 文章列表 */
        .articles-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .articles-header {
            background: #f8f9fa;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
        }

        .article-item {
            padding: 1.5rem;
            border-bottom: 1px solid #e9ecef;
            transition: background-color 0.3s ease;
        }

        .article-item:hover {
            background: #f8f9fa;
        }

        .article-item:last-child {
            border-bottom: none;
        }

        .article-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }

        .article-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .article-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 1rem;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .article-summary {
            color: #6c757d;
            line-height: 1.5;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .article-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .tag {
            background: #e9ecef;
            color: #495057;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            font-size: 0.8rem;
        }

        .article-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            white-space: nowrap;
        }

        .status-draft {
            background: #ffc107;
            color: #000;
        }

        .status-published {
            background: #28a745;
            color: white;
        }

        .status-hidden {
            background: #6c757d;
            color: white;
        }

        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .pagination button {
            padding: 0.5rem 0.75rem;
            border: 2px solid #e9ecef;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pagination button:hover {
            border-color: #667eea;
        }

        .pagination button.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 3rem;
            color: #6c757d;
        }

        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 3rem;
            color: #6c757d;
        }

        .empty-icon {
            font-size: 4rem;
            color: #e9ecef;
            margin-bottom: 1rem;
        }

        .empty-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .empty-description {
            margin-bottom: 2rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            .toolbar {
                flex-direction: column;
                align-items: stretch;
            }

            .toolbar-left {
                justify-content: center;
            }

            .search-box input {
                min-width: 150px;
            }

            .article-header {
                flex-direction: column;
                gap: 1rem;
            }

            .article-actions {
                justify-content: center;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* 提示框样式 */
        .alert {
            padding: 0.75rem 1rem;
            margin-bottom: 1rem;
            border-radius: 6px;
            font-size: 0.9rem;
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .alert-warning {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="header">
        <div class="header-content">
            <div class="header-title">
                <i class="fas fa-file-alt"></i>
                我的文章
            </div>
            <div class="header-actions">
                <a href="editor.html" class="btn btn-primary">
                    <i class="fas fa-plus"></i>
                    写文章
                </a>
                <a href="profile.html" class="btn btn-outline">
                    <i class="fas fa-user"></i>
                    个人资料
                </a>
                <a href="blog.html" class="btn btn-outline">
                    <i class="fas fa-home"></i>
                    返回首页
                </a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <div class="main-content">
        <div id="alertContainer"></div>

        <!-- 统计信息 -->
        <div class="stats-grid" id="statsGrid">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-file-alt"></i>
                </div>
                <div class="stat-value" id="totalArticles">0</div>
                <div class="stat-label">总文章数</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-eye"></i>
                </div>
                <div class="stat-value" id="totalViews">0</div>
                <div class="stat-label">总阅读量</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-value" id="publishedArticles">0</div>
                <div class="stat-label">已发布</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-edit"></i>
                </div>
                <div class="stat-value" id="draftArticles">0</div>
                <div class="stat-label">草稿</div>
            </div>
        </div>

        <!-- 工具栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <div class="search-box">
                    <input type="text" id="searchInput" placeholder="搜索文章标题..." />
                    <button type="button" onclick="searchArticles()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>

                <div class="status-filter">
                    <button class="filter-btn active" onclick="filterByStatus('all')">全部</button>
                    <button class="filter-btn" onclick="filterByStatus(1)">已发布</button>
                    <button class="filter-btn" onclick="filterByStatus(0)">草稿</button>
                    <button class="filter-btn" onclick="filterByStatus(2)">已隐藏</button>
                </div>
            </div>

            <div>
                <button class="btn btn-secondary" onclick="refreshArticles()">
                    <i class="fas fa-sync-alt"></i>
                    刷新
                </button>
            </div>
        </div>

        <!-- 加载状态 -->
        <div id="loadingIndicator" class="loading" style="display: none;">
            <div class="spinner"></div>
            <p>加载中...</p>
        </div>

        <!-- 文章列表 -->
        <div class="articles-container" id="articlesContainer">
            <div class="articles-header">
                文章列表
            </div>
            <div id="articlesList">
                <!-- 文章列表将在这里动态加载 -->
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination" id="pagination">
            <!-- 分页控件将在这里动态生成 -->
        </div>
    </div>

    <script>
        // 全局变量
        let currentPage = 1;
        let currentStatus = 'all';
        let currentKeyword = '';
        const pageSize = 10;

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('我的文章页面初始化');
            
            // 添加调试信息
            debugAuthInfo();
            
            if (!checkAuth()) {
                return;
            }

            loadStats();
            loadArticles();

            // 绑定搜索框回车事件
            document.getElementById('searchInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    searchArticles();
                }
            });
        });

        // 调试认证信息
        function debugAuthInfo() {
            const token = localStorage.getItem('token');
            const userRoles = localStorage.getItem('userRoles');
            const user = localStorage.getItem('user');
            
            console.log('🔍 前端认证调试信息:');
            console.log('  - Token存在:', !!token);
            console.log('  - Token长度:', token ? token.length : 0);
            console.log('  - Token前20字符:', token ? token.substring(0, 20) + '...' : 'null');
            console.log('  - 用户信息:', user);
            console.log('  - 用户角色:', userRoles);
            
            if (!token) {
                showAlert('未找到登录令牌，请重新登录', 'warning');
                setTimeout(() => {
                    window.location.href = 'login.html';
                }, 3000);
                return false;
            }
            return true;
        }

        // 检查登录状态
        function checkAuth() {
            const user = localStorage.getItem('user');
            const token = localStorage.getItem('token');
            
            if (!user || !token) {
                alert('请先登录');
                window.location.href = 'login.html';
                return false;
            }

            // 检查token是否过期
            if (isTokenExpired(token)) {
                alert('登录已过期，请重新登录');
                clearAuthData();
                window.location.href = 'login.html';
                return false;
            }

            return true;
        }

        // 检查token是否过期
        function isTokenExpired(token) {
            try {
                const payload = JSON.parse(atob(token.split('.')[1]));
                const currentTime = Date.now() / 1000;
                return payload.exp < currentTime;
            } catch (e) {
                return true;
            }
        }

        // 清除认证数据
        function clearAuthData() {
            localStorage.removeItem('user');
            localStorage.removeItem('token');
            localStorage.removeItem('refreshToken');
            localStorage.removeItem('userRoles');
            localStorage.removeItem('userPermissions');
        }

        // 加载统计信息
        async function loadStats() {
            try {
                const response = await fetchWithAuth('/api/user/articles/stats');
                
                if (response.ok) {
                    const result = await response.json();
                    if (result.code === 0) {
                        const stats = result.data;
                        document.getElementById('totalArticles').textContent = stats.totalArticles || 0;
                        document.getElementById('totalViews').textContent = stats.totalViews || 0;
                        document.getElementById('publishedArticles').textContent = stats.publishedArticles || 0;
                        document.getElementById('draftArticles').textContent = stats.draftArticles || 0;
                    }
                }
            } catch (error) {
                console.error('加载统计信息失败:', error);
            }
        }

        // 加载文章列表
        async function loadArticles() {
            showLoading(true);

            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    size: pageSize
                });

                if (currentKeyword) {
                    params.append('keyword', currentKeyword);
                }

                if (currentStatus !== 'all') {
                    params.append('status', currentStatus);
                }

                const response = await fetchWithAuth(`/api/user/articles?${params}`);
                
                if (response.ok) {
                    const result = await response.json();
                    if (result.code === 0) {
                        renderArticles(result.data.articles);
                        renderPagination(result.data);
                    } else {
                        showAlert('加载文章失败：' + result.message, 'danger');
                    }
                } else {
                    showAlert('加载文章失败，请稍后重试', 'danger');
                }
            } catch (error) {
                console.error('加载文章失败:', error);
                showAlert('加载文章失败：' + error.message, 'danger');
            } finally {
                showLoading(false);
            }
        }

        // 渲染文章列表
        function renderArticles(articles) {
            const container = document.getElementById('articlesList');
            
            if (!articles || articles.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="empty-title">暂无文章</div>
                        <div class="empty-description">您还没有发布任何文章</div>
                        <a href="editor.html" class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                            写第一篇文章
                        </a>
                    </div>
                `;
                return;
            }

            container.innerHTML = articles.map(article => `
                <div class="article-item">
                    <div class="article-header">
                        <div>
                            <div class="article-title">${escapeHtml(article.title)}</div>
                            <div class="article-meta">
                                <div class="meta-item">
                                    <i class="fas fa-calendar"></i>
                                    ${formatDate(article.createTime)}
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-eye"></i>
                                    ${article.viewCount || 0} 阅读
                                </div>
                                ${article.categoryName ? `
                                <div class="meta-item">
                                    <i class="fas fa-folder"></i>
                                    ${escapeHtml(article.categoryName)}
                                </div>
                                ` : ''}
                            </div>
                        </div>
                        <div class="status-badge ${getStatusClass(article.status)}">
                            ${getStatusText(article.status)}
                        </div>
                    </div>
                    
                    ${article.summary ? `
                    <div class="article-summary">
                        ${escapeHtml(article.summary)}
                    </div>
                    ` : ''}
                    
                    ${article.tags && article.tags.length > 0 ? `
                    <div class="article-tags">
                        ${article.tags.map(tag => `<span class="tag">${escapeHtml(tag.name)}</span>`).join('')}
                    </div>
                    ` : ''}
                    
                    <div class="article-actions">
                        <a href="editor.html?id=${article.id}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-edit"></i>
                            编辑
                        </a>
                        <button class="btn btn-primary btn-sm" onclick="togglePublish(${article.id}, ${article.status})">
                            <i class="fas fa-${article.status === 1 ? 'eye-slash' : 'paper-plane'}"></i>
                            ${article.status === 1 ? '取消发布' : '发布'}
                        </button>
                        <button class="btn btn-danger btn-sm" onclick="deleteArticle(${article.id}, '${escapeHtml(article.title)}')">
                            <i class="fas fa-trash"></i>
                            删除
                        </button>
                    </div>
                </div>
            `).join('');
        }

        // 渲染分页
        function renderPagination(data) {
            const container = document.getElementById('pagination');
            const { page, totalPages, total } = data;
            
            if (totalPages <= 1) {
                container.innerHTML = '';
                return;
            }

            let paginationHtml = '';
            
            // 上一页
            paginationHtml += `
                <button ${page <= 1 ? 'disabled' : ''} onclick="changePage(${page - 1})">
                    <i class="fas fa-chevron-left"></i>
                </button>
            `;
            
            // 页码
            for (let i = 1; i <= totalPages; i++) {
                if (i === 1 || i === totalPages || (i >= page - 2 && i <= page + 2)) {
                    paginationHtml += `
                        <button class="${i === page ? 'active' : ''}" onclick="changePage(${i})">
                            ${i}
                        </button>
                    `;
                } else if (i === page - 3 || i === page + 3) {
                    paginationHtml += '<span>...</span>';
                }
            }
            
            // 下一页
            paginationHtml += `
                <button ${page >= totalPages ? 'disabled' : ''} onclick="changePage(${page + 1})">
                    <i class="fas fa-chevron-right"></i>
                </button>
            `;
            
            container.innerHTML = paginationHtml;
        }

        // 切换页码
        function changePage(page) {
            if (page < 1) return;
            currentPage = page;
            loadArticles();
        }

        // 按状态筛选
        function filterByStatus(status) {
            // 更新激活状态
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            currentStatus = status;
            currentPage = 1;
            loadArticles();
        }

        // 搜索文章
        function searchArticles() {
            currentKeyword = document.getElementById('searchInput').value.trim();
            currentPage = 1;
            loadArticles();
        }

        // 刷新文章
        function refreshArticles() {
            currentPage = 1;
            currentKeyword = '';
            currentStatus = 'all';
            
            document.getElementById('searchInput').value = '';
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector('.filter-btn').classList.add('active');
            
            loadStats();
            loadArticles();
        }

        // 切换发布状态
        async function togglePublish(articleId, currentStatus) {
            const newStatus = currentStatus === 1 ? 0 : 1;
            const actionText = newStatus === 1 ? '发布' : '取消发布';
            
            if (!confirm(`确定要${actionText}这篇文章吗？`)) {
                return;
            }

            try {
                const response = await fetchWithAuth(`/api/user/articles/${articleId}/publish?status=${newStatus}`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const result = await response.json();
                    if (result.code === 0) {
                        showAlert(result.message, 'success');
                        loadStats();
                        loadArticles();
                    } else {
                        showAlert('操作失败：' + result.message, 'danger');
                    }
                } else {
                    showAlert('操作失败，请稍后重试', 'danger');
                }
            } catch (error) {
                console.error('切换发布状态失败:', error);
                showAlert('操作失败：' + error.message, 'danger');
            }
        }

        // 删除文章
        async function deleteArticle(articleId, title) {
            if (!confirm(`确定要删除文章《${title}》吗？此操作不可恢复！`)) {
                return;
            }

            try {
                const response = await fetchWithAuth(`/api/user/articles/${articleId}`, {
                    method: 'DELETE'
                });
                
                if (response.ok) {
                    const result = await response.json();
                    if (result.code === 0) {
                        showAlert('文章删除成功', 'success');
                        loadStats();
                        loadArticles();
                    } else {
                        showAlert('删除失败：' + result.message, 'danger');
                    }
                } else {
                    showAlert('删除失败，请稍后重试', 'danger');
                }
            } catch (error) {
                console.error('删除文章失败:', error);
                showAlert('删除失败：' + error.message, 'danger');
            }
        }

        // 工具函数
        function getStatusClass(status) {
            switch(status) {
                case 1: return 'status-published';
                case 2: return 'status-hidden';
                default: return 'status-draft';
            }
        }

        function getStatusText(status) {
            switch(status) {
                case 1: return '已发布';
                case 2: return '已隐藏';
                default: return '草稿';
            }
        }

        function formatDate(dateString) {
            if (!dateString) return '未知';
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', {
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        // 创建带认证头的fetch请求
        function fetchWithAuth(url, options = {}) {
            const token = localStorage.getItem('token');
            
            if (!token) {
                console.error('❌ fetchWithAuth: 没有找到token');
                showAlert('登录状态已过期，请重新登录', 'warning');
                setTimeout(() => {
                    window.location.href = 'login.html';
                }, 2000);
                return Promise.reject(new Error('No token available'));
            }
            
            console.log('🔍 fetchWithAuth发送请求:', url);
            console.log('🔍 Token前20字符:', token.substring(0, 20) + '...');
            
            options.headers = {
                ...options.headers,
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            };
            
            return fetch(url, options).then(response => {
                console.log('🔍 API响应状态:', response.status);
                if (response.status === 401) {
                    showAlert('登录已过期，请重新登录', 'warning');
                    setTimeout(() => {
                        window.location.href = 'login.html';
                    }, 2000);
                }
                return response;
            });
        }

        // 显示加载状态
        function showLoading(show) {
            const loading = document.getElementById('loadingIndicator');
            loading.style.display = show ? 'block' : 'none';
        }

        // 显示提示信息
        function showAlert(message, type) {
            const container = document.getElementById('alertContainer');
            const alert = document.createElement('div');
            alert.className = `alert alert-${type}`;
            alert.textContent = message;
            
            container.appendChild(alert);
            
            // 3秒后自动消失
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.parentNode.removeChild(alert);
                }
            }, 3000);
        }
    </script>
</body>
</html>
